
import { useEffect, useState } from "react";
import { GetActions } from "../../api/admin";
import { Button, Input, Space, Table, Tag, Spin, Pagination, Skeleton } from "antd"
import "../../css/order.css"
import React from 'react';


const PAGE_SIZE = 10;// 设置每页显示的数据条数
const Action = () => {
    const [loading, setLoading] = React.useState(false);
    const [type, setType] = useState('');
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [searchKeyword, setSearchKeyword] = useState('');//搜索关键字
    const [shows, setShows] = useState(true);//骨架屏


    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const Type = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`,
            width: 70
        },
        {
            title: '行为',
            dataIndex: 'action',
            width: 170
        },
        {
            title: '结果',
            dataIndex: 'result',
            render: (_, record) => (
                <Tag color={record.result === 0 ? 'success' : 'error'}>{record.result === 0 ? "成功" : "失败"}</Tag>
            ),
            width: 100
        },

        {
            title: '用户',
            dataIndex: 'user',
            key: 'user',
            ellipsis: true
        },
        {
            title: '地址',
            dataIndex: 'url',
            key: 'url',
            ellipsis: true,
        },
        {
            title: 'ip',
            dataIndex: 'ip',
            key: 'ip',
        },
        {
            title: '参数',
            dataIndex: 'params',
            ellipsis: true
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',

        },

    ]

    const bindgoods = async () => {
        setLoading(true)
        await GetActions({
            page: currentPage,
            limit: PAGE_SIZE,
            key: searchKeyword,
            // total:''
        }).then((res) => {
            if (res.result === 0) {
                setLoading(false)
                setType(res.data.data);
                setTotal(res.data.total);
                setShows(false);
            }
        })
    }
    useEffect(() => {
        bindgoods();
    }, [currentPage, searchKeyword]);
    return (
        <div className="exam-container">
            <Skeleton loading={shows} active={true} paragraph={{ rows: 10 }} rows={20} style={{ padding: '10px' }}>
                <Spin spinning={loading} delay={500}>
                    <div className="container">
                        <div className="content">
                            <div className="button">
                                <div className='box-button2'>
                                    <Space.Compact style={{ width: '100%', height: '40px' }}>
                                        <Input placeholder="关键字" value={searchKeyword}
                                            onChange={(e) => setSearchKeyword(e.target.value)} ></Input>
                                        <Button type="primary" ghost style={{ height: '40px' }}>搜索</Button>
                                    </Space.Compact>
                                </div>
                            </div>
                            <div className="table">
                                <Table
                                    columns={Type}
                                    dataSource={type}
                                    bordered
                                    pagination={false}
                                />
                            </div>
                            <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                        </div>
                    </div>
                </Spin></Skeleton>
        </div>
    )
}
export default Action;